<template>
  <div id="bookDiv">
    <table>
      <tr>
        <td>id</td>
        <td>书名</td>
        <td>作者</td>
        <td>出版社</td>
        <td>页数</td>
        <td>价格</td>
      </tr>
<!--注意v-for循环的时候， key属性只能使用string或者number-->
<!--注意key在使用的时候 必须使用v-bind 属性绑定的形式，指定key的值-->
      <tr v-for="book in books" v-bind:key="book.id">
        <td>{{book.id}}</td>
        <td>{{book.name}}</td>
        <td>{{book.author}}</td>
        <td>{{book.publish}}</td>
        <td>{{book.pages}}</td>
        <td>{{book.price}}</td>
      </tr>
    </table>

  </div>
</template>

<script>


export default {
  name: "Book",
  data(){
    return {
      // 返回一个数组，数组里面是对象
      books:[]
    }
  },
  created() {
    // 此处的this才是Vue的对象
    // this.books

    const _this= this
    // eslint-disable-next-line no-undef
    this.$http.get(
        '/book/findAllBook'
    ).then(
        function (resp){
          // 此处的this指的是回调的对象
          // 把请求到的对象给books
          _this.books=resp.data
        }
        // eslint-disable-next-line no-unused-vars
    ).catch(err=>(
        console.log("请求失败")
    ))
  }
}
</script>

<style scoped>
table,tr,td{
  border: red dashed;
}
</style>